<template>
	<view class="container container28449">
		<view class="flex flex-wrap diygw-col-24 justify-around items-start green flex-clz">
			<view class="flex flex-wrap diygw-col-0 items-center">
				<text class="flex icon6 diygw-col-0 icon6-clz diy-icon-safe"></text>
				<view class="diygw-col-0 text6-clz"> 实时更新 </view>
			</view>
			<view class="flex flex-wrap diygw-col-0 items-center">
				<text class="flex icon1 diygw-col-0 icon1-clz diy-icon-light"></text>
				<view class="diygw-col-0 text1-clz"> 极速响应 </view>
			</view>
			<view class="flex flex-wrap diygw-col-0 items-center">
				<text class="flex icon diygw-col-0 icon-clz diy-icon-wefill"></text>
				<view class="diygw-col-0 text-clz"> 公益服务 </view>
			</view>
		</view>
        <view class="flex flex-wrap diygw-col-24 flex-direction-column flex3-clz">
            <view class="diygw-col-24 text2-clz"> 年龄 </view>
            <u-form-item labelWidth="auto" :borderBottom="false" class="diygw-col-24 input-clz diygw-form-item-small" labelPosition="top" prop="input">
                <u-input :focus="inputFocus" class="" placeholder="" v-model="input.currentAge"></u-input>
            </u-form-item>
            <view class="diygw-col-24 text2-clz"> 预期退休年龄 </view>
            <u-form-item labelWidth="auto" :borderBottom="false" class="diygw-col-24 input-clz diygw-form-item-small" labelPosition="top" prop="input">
                <u-input :focus="inputFocus" class="" placeholder="" v-model="input.retirementAge"></u-input>
            </u-form-item>
            <view class="diygw-col-24 text2-clz"> 当前储蓄总额 </view>
            <u-form-item labelWidth="auto" :borderBottom="false" class="diygw-col-24 input-clz diygw-form-item-small" labelPosition="top" prop="input">
                <u-input :focus="inputFocus" class="" placeholder="" v-model="input.currentSavings"></u-input>
            </u-form-item>
            <view class="diygw-col-24 text2-clz"> 每月储蓄金额 </view>
            <u-form-item labelWidth="auto" :borderBottom="false" class="diygw-col-24 input-clz diygw-form-item-small" labelPosition="top" prop="input">
                <u-input :focus="inputFocus" class="" placeholder="" v-model="input.monthlySavings"></u-input>
            </u-form-item>
            <view class="diygw-col-24 text2-clz"> 年投资回报率（百分比） </view>
            <u-form-item labelWidth="auto" :borderBottom="false" class="diygw-col-24 input-clz diygw-form-item-small" labelPosition="top" prop="input">
                <u-input :focus="inputFocus" class="" placeholder="" v-model="input.annualReturn"></u-input>
                <button @tap="apiApi" class="diygw-tag radius-xs green">查询</button>
            </u-form-item>
        </view>
		<view class="diygw-col-24 text34-clz"> 计算器帮助用户计算基于当前的储蓄情况和储蓄计划，到达预期退休年龄时的储蓄总额。本工具仅供参考，实际储蓄规划应考虑更多因素，如通货膨胀、税务影响等。 </view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				api: ``,
				inputFocus: false,
                input: {
                    currentAge: '',
                    retirementAge: '',
                    currentSavings: '',
                    monthlySavings: '',
                    annualReturn: ''
                },
                totalSavings: null // 新增储蓄总额变量
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			// 接口 API请求方法
            async apiApi() {
                try {
                    // 构造请求地址及数据
                    let http_url = `https://api.youyacao.com/api/tuixiu?currentAge=${this.input.currentAge}&retirementAge=${this.input.retirementAge}&currentSavings=${this.input.currentSavings}&monthlySavings=${this.input.monthlySavings}&annualReturn=${this.input.annualReturn}`;
                    
                    // 发送请求
                    let response = await uni.request({
                        url: http_url,
                        method: 'GET'
                    });

                    // 处理返回数据
                    if (response.data.code === 200) {
                        this.totalSavings = response.data.data.totalSavings;
						uni.showModal({
						    title: '成功',
						    content: '预计储蓄总额：'+this.totalSavings,
						});
                    } else {
                        uni.showToast({
                            title: response.data.msg || '请求失败，请稍后重试',
                            icon: 'none'
                        });
                    }
                } catch (error) {
                    uni.showToast({
                        title: '请求异常，请稍后重试',
                        icon: 'none'
                    });
                }
            }
        }

		
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		padding-top: 40rpx;
		padding-left: 0rpx;
		padding-bottom: 0rpx;
		height: 160rpx;
		padding-right: 0rpx;
	}
	.icon6-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 6rpx;
	}
	.icon6 {
		font-size: 32rpx;
	}
	.text6-clz {
		font-weight: bold;
	}
	.icon1-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 6rpx;
	}
	.icon1 {
		font-size: 32rpx;
	}
	.text1-clz {
		font-weight: bold;
	}
	.icon-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 6rpx;
	}
	.icon {
		font-size: 32rpx;
	}
	.text-clz {
		font-weight: bold;
	}
	.flex3-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 30rpx;
		margin-right: 40rpx;
		background-color: #ffffff;
		margin-left: 40rpx;
		overflow: hidden;
		width: calc(100% - 40rpx - 40rpx) !important;
		border-top-left-radius: 30rpx;
		margin-top: -50rpx;
		border-bottom-right-radius: 30rpx;
		margin-bottom: 0rpx;
		padding-right: 20rpx;
	}
	.text2-clz {
		padding-top: 10rpx;
		color: #a0a0a0;
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.input-clz {
		padding-top: 10rpx;
		font-weight: bold;
		padding-left: 0rpx;
		font-size: 36rpx !important;
		padding-bottom: 10rpx;
		padding-right: 0rpx;
	}
	.text34-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 30rpx;
		margin-right: 40rpx;
		background-color: #ffffff;
		margin-left: 40rpx;
		overflow: hidden;
		width: calc(100% - 40rpx - 40rpx) !important;
		border-top-left-radius: 30rpx;
		margin-top: 30rpx;
		border-bottom-right-radius: 30rpx;
		margin-bottom: 0rpx;
		padding-right: 20rpx;
	}
	.container28449 {
		padding-left: 0px;
		padding-right: 0px;
		background-color: #f3f4f6;
	}
	.diy-item-select {
		background-color: inherit;
		color: #07c160;
		background-image: linear-gradient(45deg, #f5fdf9 1%, #ebfdf4 99%);
	}
	.diy-item-remark {
		color: #07c160;
	}
	.container28449 {
	}
</style>
